108. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2022-09-08 08:49:14 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

108.1 Files compared

#LocationFileLast Modified
1/Volumes/Data 1/Ampps/www/Porto v4.0.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Theme/web/css/source_module.less2021-05-04 03:16:30 +0000
2Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Theme/web/css/source_module.less2021-05-04 03:16:30 +0000

108.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged11640
Changed00
Inserted00
Removed00

108.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

108.4 Active regular expressions

No regular expressions were active.

108.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 @import 'module/_collapsible_navigation.less'; 6 @import 'module/_collapsible_navigation.less';
7 @import 'module/_heading.less'; 7 @import 'module/_heading.less';
8 @import 'module/_info_box.less'; 8 @import 'module/_info_box.less';
9 @import 'module/_social_icons.less'; 9 @import 'module/_social_icons.less';
10 @import 'module/_testimonial.less'; 10 @import 'module/_testimonial.less';
11 // 11 //
12 //  Theme variables 12 //  Theme variables
13 //  _____________________________________________ 13 //  _____________________________________________
14  14 
15 // 15 //
16 //  Messages 16 //  Messages
17 //  --------------------------------------------- 17 //  ---------------------------------------------
18  18 
19 @message-global-note__color: @text__color; 19 @message-global-note__color: @text__color;
20 @message-global-note__background: @color-yellow-light2; 20 @message-global-note__background: @color-yellow-light2;
21 @message-global-note-link__color: @link__color; 21 @message-global-note-link__color: @link__color;
22 @message-global-note-link__color-hover: @link__hover__color; 22 @message-global-note-link__color-hover: @link__hover__color;
23 @message-global-note-link__color-active: @link__active__color; 23 @message-global-note-link__color-active: @link__active__color;
24 @message-global-note__border-color: @color-yellow-light3; 24 @message-global-note__border-color: @color-yellow-light3;
25  25 
26 @message-global-caution__color: @color-white; 26 @message-global-caution__color: @color-white;
27 @message-global-caution__background: @color-red9; 27 @message-global-caution__background: @color-red9;
28 @message-global-caution-link__color: @link__color; 28 @message-global-caution-link__color: @link__color;
29 @message-global-caution-link__color-hover: @link__hover__color; 29 @message-global-caution-link__color-hover: @link__hover__color;
30 @message-global-caution-link__color-active: @link__active__color; 30 @message-global-caution-link__color-active: @link__active__color;
31 @message-global-caution__border-color: none; 31 @message-global-caution__border-color: none;
32  32 
33 @customer-welcome__z-index: @dropdown-list__z-index + 1; 33 @customer-welcome__z-index: @dropdown-list__z-index + 1;
34  34 
35 @addto-color: @color-gray60; 35 @addto-color: @color-gray60;
36 @addto-hover-color: @primary__color; 36 @addto-hover-color: @primary__color;
37  37 
38 @price-color: @color-gray34; 38 @price-color: @color-gray34;
39 @price-size: 22px; 39 @price-size: 22px;
40 @price-size-desktop: 36px; 40 @price-size-desktop: 36px;
41  41 
42 @button__shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls 42 @button__shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls
43 @button__shadow-active: inset 0 1px 0 0 fade(@border-color__base, 80), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls 43 @button__shadow-active: inset 0 1px 0 0 fade(@border-color__base, 80), inset 0 -1px 0 0 fade(@border-color__base, 30); //  Used for secondary button and catalog toolbar controls
44  44 
45 @h1__margin-bottom__desktop: @indent__xl; 45 @h1__margin-bottom__desktop: @indent__xl;
46  46 
47 // 47 //
48 //  Footer 48 //  Footer
49 //  --------------------------------------------- 49 //  ---------------------------------------------
50  50 
51 @footer__background-color: @color-gray-light01; 51 @footer__background-color: @color-gray-light01;
52 @footer-links-separator-border-color: @color-gray-light4; 52 @footer-links-separator-border-color: @color-gray-light4;
53 @footer-links-color: @color-gray34; 53 @footer-links-color: @color-gray34;
54 @footer-links-color-hover: @color-gray20; 54 @footer-links-color-hover: @color-gray20;
55 @footer-links-color-current: @primary__color__light; 55 @footer-links-color-current: @primary__color__light;
56  56 
57 // 57 //
58 //  Layered navigation 58 //  Layered navigation
59 //  --------------------------------------------- 59 //  ---------------------------------------------
60  60 
61 @filter-title-background-color: @color-gray94; 61 @filter-title-background-color: @color-gray94;
62 @filter-link: @color-gray-darken4; 62 @filter-link: @color-gray-darken4;
63 @filter-link-hover: darken(@filter-link, 30%); 63 @filter-link-hover: darken(@filter-link, 30%);
64 @filter-quantity: @color-gray52; 64 @filter-quantity: @color-gray52;
65  65 
66 // 66 //
67 //  Common 67 //  Common
68 //  _____________________________________________ 68 //  _____________________________________________
69  69 
70 & when (@media-common = true) { 70 & when (@media-common = true) {
71     body { 71     body {
72         .lib-css(background-color, @page__background-color); 72         .lib-css(background-color, @page__background-color);
73     } 73     }
74  74 
75     //  ToDo UI: move it directly to .page-wrapper (now it doesn't appear in mediaquery cuz of size of css) 75     //  ToDo UI: move it directly to .page-wrapper (now it doesn't appear in mediaquery cuz of size of css)
76     .page-wrapper { 76     .page-wrapper {
77         .ie9 & { 77         .ie9 & {
78             .lib-css(background-color, @page__background-color); 78             .lib-css(background-color, @page__background-color);
79             min-height: 0; 79             min-height: 0;
80         } 80         }
81     } 81     }
82  82 
83     .columns .column.main { 83     .columns .column.main {
84         max-width: 100%; 84         max-width: 100%;
85         padding-bottom: 40px; 85         padding-bottom: 40px;
86     } 86     }
87  87 
88     // 88     //
89     //  Header 89     //  Header
90     //  --------------------------------------------- 90     //  ---------------------------------------------
91  91 
92     .page-header { 92     .page-header {
93         .lib-css(background-color, @header__background-color); 93         .lib-css(background-color, @header__background-color);
94         .lib-css(border-top, 3px solid @header__border-color); 94         .lib-css(border-top, 3px solid @header__border-color);
95         position: relative; 95         position: relative;
96         z-index: 20; 96         z-index: 20;
97         .panel.wrapper { 97         .panel.wrapper {
98             .lib-css(color, @header-panel__text-color); 98             .lib-css(color, @header-panel__text-color);
99         } 99         }
100     } 100     }
101  101 
102     .header.panel { 102     .header.panel {
103         > .header.links { 103         > .header.links {
104             .lib-list-inline(); 104             .lib-list-inline();
105             float: right; 105             float: right;
106             margin-left: auto; 106             margin-left: auto;
107             margin-right: @indent__base; 107             margin-right: @indent__base;
108             > li { 108             > li {
109                 text-transform: uppercase; 109                 text-transform: uppercase;
110                 > a { 110                 > a {
111                     .lib-link( 111                     .lib-link(
112                     @_link-color: inherit, 112                     @_link-color: inherit,
113                     @_link-text-decoration: none, 113                     @_link-text-decoration: none,
114                     @_link-color-visited: inherit, 114                     @_link-color-visited: inherit,
115                     @_link-text-decoration-visited: none, 115                     @_link-text-decoration-visited: none,
116                     @_link-color-hover: inherit, 116                     @_link-color-hover: inherit,
117                     @_link-color-active: inherit, 117                     @_link-color-active: inherit,
118                     ); 118                     );
119                 } 119                 }
120             } 120             }
121         } 121         }
122     } 122     }
123  123 
124     .header { 124     .header {
125         &.content:extend(.abs-add-clearfix all) { 125         &.content:extend(.abs-add-clearfix all) {
126             position: relative; 126             position: relative;
127         } 127         }
128     } 128     }
129  129 
130     .logo { 130     .logo {
131         display: block; 131         display: block;
132         position: relative; 132         position: relative;
133         z-index: 5; 133         z-index: 5;
134         img { 134         img {
135             display: block; 135             display: block;
136             max-height: 50px; 136             max-height: 50px;
137             max-width: 100%; 137             max-width: 100%;
138             height: auto; 138             height: auto;
139         } 139         }
140         .page-print & { 140         .page-print & {
141             display: inline-block; 141             display: inline-block;
142             float: none; 142             float: none;
143         } 143         }
144     } 144     }
145  145 
146     .page-main { 146     .page-main {
147         > .page-title-wrapper { 147         > .page-title-wrapper {
148             .page-title + .action { 148             .page-title + .action {
149                 margin-top: @indent__l; 149                 margin-top: @indent__l;
150             } 150             }
151         } 151         }
152     } 152     }
153  153 
154     .action.skip { 154     .action.skip {
155         &:not(:focus) { 155         &:not(:focus) {
156             &:extend(.abs-visually-hidden all); 156             &:extend(.abs-visually-hidden all);
157         } 157         }
158         &:focus { 158         &:focus {
159             .lib-css(background, @color-gray94); 159             .lib-css(background, @color-gray94);
160             .lib-css(padding, @indent__s); 160             .lib-css(padding, @indent__s);
161             box-sizing: border-box; 161             box-sizing: border-box;
162             left: 0; 162             left: 0;
163             position: absolute; 163             position: absolute;
164             text-align: center; 164             text-align: center;
165             top: 0; 165             top: 0;
166             width: 100%; 166             width: 100%;
167             z-index: 15; 167             z-index: 15;
168         } 168         }
169     } 169     }
170  170 
171     // 171     //
172     //  Global notice 172     //  Global notice
173     //  --------------------------------------------- 173     //  ---------------------------------------------
174     .message { 174     .message {
175       &.success { 175       &.success {
176         border-radius: 0; 176         border-radius: 0;
177         font-size: 1em; 177         font-size: 1em;
178       } 178       }
179       &.notice { 179       &.notice {
180         font-size: 1em; 180         font-size: 1em;
181       } 181       }
182       &.info{ 182       &.info{
183         font-size: 1em; 183         font-size: 1em;
184       } 184       }
185       &.error { 185       &.error {
186         font-size: 1em; 186         font-size: 1em;
187       } 187       }
188       &.warning {font-size: 1em;} 188       &.warning {font-size: 1em;}
189     } 189     }
190     .field-error { 190     .field-error {
191       font-size: 1em; 191       font-size: 1em;
192     } 192     }
193     .message.global { 193     .message.global {
194         p { 194         p {
195             margin: 0; 195             margin: 0;
196         } 196         }
197         &.noscript, 197         &.noscript,
198         &.cookie { 198         &.cookie {
199             .lib-message(@_message-type: global-note); 199             .lib-message(@_message-type: global-note);
200             margin: 0; 200             margin: 0;
201         } 201         }
202         &.cookie { 202         &.cookie {
203             bottom: 0; 203             bottom: 0;
204             left: 0; 204             left: 0;
205             position: fixed; 205             position: fixed;
206             right: 0; 206             right: 0;
207             z-index: 3; 207             z-index: 3;
208             .actions { 208             .actions {
209                 margin-top: @indent__s; 209                 margin-top: @indent__s;
210             } 210             }
211         } 211         }
212         &.demo { 212         &.demo {
213             .lib-message(@_message-type: global-caution); 213             .lib-message(@_message-type: global-caution);
214             margin-bottom: 0; 214             margin-bottom: 0;
215             text-align: center; 215             text-align: center;
216         } 216         }
217     } 217     }
218  218 
219     .page-header, 219     .page-header,
220     .page-footer { 220     .page-footer {
221         .switcher { 221         .switcher {
222             .options { 222             .options {
223                 .lib-dropdown( 223                 .lib-dropdown(
224                     @_dropdown-actions-padding: 0, 224                     @_dropdown-actions-padding: 0,
225                     @_dropdown-list-item-padding: 0, 225                     @_dropdown-list-item-padding: 0,
226                     @_dropdown-toggle-icon-content: @icon-down, 226                     @_dropdown-toggle-icon-content: @icon-down,
227                     @_dropdown-toggle-active-icon-content: @icon-up, 227                     @_dropdown-toggle-active-icon-content: @icon-up,
228                     @_icon-font-text-hide: true, 228                     @_icon-font-text-hide: true,
229                     @_dropdown-list-min-width: 120px, 229                     @_dropdown-list-min-width: 120px,
230                     @_dropdown-list-border: 0 230                     @_dropdown-list-border: 0
231                 ); 231                 );
232                 ul.dropdown { 232                 ul.dropdown {
233                     border-radius: 0; 233                     border-radius: 0;
234                     box-shadow: 0 10px 30px 10px rgba(0,0,0,.05); 234                     box-shadow: 0 10px 30px 10px rgba(0,0,0,.05);
235                     border: 1px solid #ccc !important; 235                     border: 1px solid #ccc !important;
236                     padding: 4px 0 !important; 236                     padding: 4px 0 !important;
237                     left: 0; 237                     left: 0;
238                     li { 238                     li {
239                         border-radius: 0; 239                         border-radius: 0;
240                     } 240                     }
241                     a { 241                     a {
242                         display: block; 242                         display: block;
243                         color: @base-font-color; 243                         color: @base-font-color;
244                         padding: 0 7px; 244                         padding: 0 7px;
245                         font-size: 1em; 245                         font-size: 1em;
246                         line-height: 25px; 246                         line-height: 25px;
247                         font-weight: 400; 247                         font-weight: 400;
248                         & > img { 248                         & > img {
249                             margin-bottom: 3px; 249                             margin-bottom: 3px;
250                             margin-right: 3px; 250                             margin-right: 3px;
251                             vertical-align: middle; 251                             vertical-align: middle;
252                         } 252                         }
253                         &:hover { 253                         &:hover {
254                             text-decoration: none; 254                             text-decoration: none;
255                         } 255                         }
256                     } 256                     }
257                 } 257                 }
258                 .action.toggle { 258                 .action.toggle {
259                   display: flex; 259                   display: flex;
260                   align-items: center; 260                   align-items: center;
261                   padding: 0 5px; 261                   padding: 0 5px;
262                   line-height: 26px; 262                   line-height: 26px;
263                   letter-spacing: 0.025em; 263                   letter-spacing: 0.025em;
264                   &::after { 264                   &::after {
265                     font-size: 1em; 265                     font-size: 1em;
266                     -webkit-font-smoothing: inherit; 266                     -webkit-font-smoothing: inherit;
267                     margin: 0 0 0 5px; 267                     margin: 0 0 0 5px;
268                     line-height: 1; 268                     line-height: 1;
269                   } 269                   }
270                   &.active { 270                   &.active {
271                       display: flex; 271                       display: flex;
272                       align-items: center; 272                       align-items: center;
273                       &::after { 273                       &::after {
274                         font-size: 1em; 274                         font-size: 1em;
275                         -webkit-font-smoothing: inherit; 275                         -webkit-font-smoothing: inherit;
276                         margin: 0 0 0 5px; 276                         margin: 0 0 0 5px;
277                         line-height: 1; 277                         line-height: 1;
278                       } 278                       }
279                   } 279                   }
280                 } 280                 }
281             } 281             }
282             strong { 282             strong {
283                 font-weight: inherit; 283                 font-weight: inherit;
284                 & > img { 284                 & > img {
285                     margin-bottom: 3px; 285                     margin-bottom: 3px;
286                     margin-right: 3px; 286                     margin-right: 3px;
287                     vertical-align: middle; 287                     vertical-align: middle;
288                 } 288                 }
289             } 289             }
290             .label:extend(.abs-visually-hidden all) { 290             .label:extend(.abs-visually-hidden all) {
291             } 291             }
292         } 292         }
293     } 293     }
294     span.split { 294     span.split {
295         height: 14px; 295         height: 14px;
296         width: 1px; 296         width: 1px;
297         border-right: 1px solid #ccc; 297         border-right: 1px solid #ccc;
298         margin: 0 13px; 298         margin: 0 13px;
299     } 299     }
300 } 300 }
301  301 
302 // 302 //
303 //  Navigation 303 //  Navigation
304 //  --------------------------------------------- 304 //  ---------------------------------------------
305  305 
306 @media(max-width: 991px){ 306 @media(max-width: 991px){
307     .nav-sections .switcher-trigger strong:after { 307     .nav-sections .switcher-trigger strong:after {
308         .lib-font-size(16); 308         .lib-font-size(16);
309         right: -25px; 309         right: -25px;
310         top: 2px; 310         top: 2px;
311     } 311     }
312     .navigation .parent .level-top:after { 312     .navigation .parent .level-top:after {
313         .lib-font-size(22); 313         .lib-font-size(22);
314         right: 10px; 314         right: 10px;
315         top: 13px; 315         top: 13px;
316     } 316     }
317     header.page-header.sticky-header .header-main{ 317     header.page-header.sticky-header .header-main{
318         position: fixed; 318         position: fixed;
319         width: 100%; 319         width: 100%;
320         top: 0; 320         top: 0;
321         box-shadow: 0 1px 0 0 rgba(0,0,0,.06); 321         box-shadow: 0 1px 0 0 rgba(0,0,0,.06);
322         background-color: #fff; 322         background-color: #fff;
323         z-index: 9; 323         z-index: 9;
324     } 324     }
325 } 325 }
326 @media(max-width: 991px){ 326 @media(max-width: 991px){
327   .nav-sections .customer-welcome, 327   .nav-sections .customer-welcome,
328   .nav-sections .customer-welcome + .authorization-link { 328   .nav-sections .customer-welcome + .authorization-link {
329       display: none; 329       display: none;
330   } 330   }
331 } 331 }
332 // 332 //
333 //  Common 333 //  Common
334 //  _____________________________________________ 334 //  _____________________________________________
335  335 
336 & when (@media-common = true) { 336 & when (@media-common = true) {
337  337 
338     // 338     //
339     //  Widgets 339     //  Widgets
340     //  --------------------------------------------- 340     //  ---------------------------------------------
341  341 
342     .sidebar { 342     .sidebar {
343         .widget.block:not(:last-child), 343         .widget.block:not(:last-child),
344         .widget:not(:last-child) { 344         .widget:not(:last-child) {
345             margin-bottom: @indent__xl; 345             margin-bottom: @indent__xl;
346         } 346         }
347     } 347     }
348  348 
349     .widget { 349     .widget {
350         clear: both; 350         clear: both;
351         .block-title:extend(.abs-block-widget-title all) { 351         .block-title:extend(.abs-block-widget-title all) {
352         } 352         }
353     } 353     }
354 } 354 }
355  355 
356 // 356 //
357 //  Desktop 357 //  Desktop
358 //  _____________________________________________ 358 //  _____________________________________________
359 & when (@media-common = true) { 359 & when (@media-common = true) {
360   .customer-welcome { 360   .customer-welcome {
361       .lib-dropdown( 361       .lib-dropdown(
362           @_toggle-selector: ~".action.switch", 362           @_toggle-selector: ~".action.switch",
363           @_options-selector: ~"ul", 363           @_options-selector: ~"ul",
364           @_dropdown-actions-padding: 0, 364           @_dropdown-actions-padding: 0,
365           @_dropdown-list-item-padding: 0, 365           @_dropdown-list-item-padding: 0,
366           @_dropdown-toggle-icon-content: @icon-down, 366           @_dropdown-toggle-icon-content: @icon-down,
367           @_dropdown-toggle-active-icon-content: @icon-up, 367           @_dropdown-toggle-active-icon-content: @icon-up,
368           @_icon-font-text-hide: true, 368           @_icon-font-text-hide: true,
369           @_icon-font-margin: 0 0 0 5px, 369           @_icon-font-margin: 0 0 0 5px,
370           @_icon-font-size: 16px, 370           @_icon-font-size: 16px,
371           @_icon-font-line-height: 15px, 371           @_icon-font-line-height: 15px,
372           @_dropdown-list-border: 0, 372           @_dropdown-list-border: 0,
373           @_dropdown-list-z-index: @customer-welcome__z-index 373           @_dropdown-list-z-index: @customer-welcome__z-index
374       ); 374       );
375       li:extend(.switcher li all) { 375       li:extend(.switcher li all) {
376           a { 376           a {
377               .lib-link( 377               .lib-link(
378               @_link-color: @color-gray20, 378               @_link-color: @color-gray20,
379               @_link-text-decoration: none, 379               @_link-text-decoration: none,
380               @_link-color-visited: @color-gray20, 380               @_link-color-visited: @color-gray20,
381               @_link-text-decoration-visited: none, 381               @_link-text-decoration-visited: none,
382               @_link-color-hover: @color-gray20, 382               @_link-color-hover: @color-gray20,
383               @_link-text-decoration-hover: none, 383               @_link-text-decoration-hover: none,
384               @_link-color-active: @color-gray20, 384               @_link-color-active: @color-gray20,
385               @_link-text-decoration-active: none 385               @_link-text-decoration-active: none
386               ); 386               );
387               display: block; 387               display: block;
388               line-height: 1.2; 388               line-height: 1.2;
389               padding: 5px; 389               padding: 5px;
390               text-transform: capitalize; 390               text-transform: capitalize;
391               font-weight: 400; 391               font-weight: 400;
392               font-size: 12px; 392               font-size: 12px;
393           } 393           }
394       } 394       }
395       .customer-menu { 395       .customer-menu {
396           display: none; 396           display: none;
397       } 397       }
398       .action.switch { 398       .action.switch {
399           .lib-button-reset(); 399           .lib-button-reset();
400           vertical-align: top; 400           vertical-align: top;
401       } 401       }
402       .header.links { 402       .header.links {
403           min-width: 175px; 403           min-width: 175px;
404           box-shadow: 0 0 3px rgba(0,0,0,0.25); 404           box-shadow: 0 0 3px rgba(0,0,0,0.25);
405           border-radius: 3px; 405           border-radius: 3px;
406           margin-top: 7px; 406           margin-top: 7px;
407           left: auto; 407           left: auto;
408           right: 0; 408           right: 0;
409           &:before { 409           &:before {
410               left: auto; 410               left: auto;
411               right: 10px; 411               right: 10px;
412           } 412           }
413           &:after { 413           &:after {
414               left: auto; 414               left: auto;
415               right: 9px; 415               right: 9px;
416               border-bottom-color: #ccc; 416               border-bottom-color: #ccc;
417           } 417           }
418       } 418       }
419       &.active { 419       &.active {
420           .action.switch { 420           .action.switch {
421               .lib-icon-font-symbol( 421               .lib-icon-font-symbol(
422               @_icon-font-content: @icon-up, 422               @_icon-font-content: @icon-up,
423               @_icon-font-position: after 423               @_icon-font-position: after
424               ); 424               );
425           } 425           }
426           .customer-menu { 426           .customer-menu {
427               display: block; 427               display: block;
428           } 428           }
429       } 429       }
430       .greet { 430       .greet {
431           display: none; 431           display: none;
432       } 432       }
433   } 433   }
434 } 434 }
435 @media(min-width: 992px) { 435 @media(min-width: 992px) {
436     html, 436     html,
437     body { 437     body {
438         min-height: 100%; //  Stretch screen area for sticky footer 438         min-height: 100%; //  Stretch screen area for sticky footer
439     } 439     }
440  440 
441     body { 441     body {
442         .ie9 & { 442         .ie9 & {
443             .lib-css(background-color, @copyright__background-color); 443             .lib-css(background-color, @copyright__background-color);
444         } 444         }
445     } 445     }
446     .customer-menu .header.links a { 446     .customer-menu .header.links a {
447         color: #777 !important; 447         color: #777 !important;
448     } 448     }
449  449 
450     .sticky-logo { 450     .sticky-logo {
451         float: left; 451         float: left;
452         margin-top: 13px; 452         margin-top: 13px;
453         margin-right: 20px; 453         margin-right: 20px;
454         .logo { 454         .logo {
455             margin: 0 !important; 455             margin: 0 !important;
456  456 
457             img { 457             img {
458                 height: 35px; 458                 height: 35px;
459                 width: auto; 459                 width: auto;
460                 max-width: none; 460                 max-width: none;
461                 margin-right: 20px; 461                 margin-right: 20px;
462             } 462             }
463         } 463         }
464     } 464     }
465  465 
466     header.page-header.sticky-header { 466     header.page-header.sticky-header {
467         .nav-sections { 467         .nav-sections {
468             position: fixed !important; 468             position: fixed !important;
469             left: 0 !important; 469             left: 0 !important;
470             top: 0 !important; 470             top: 0 !important;
471             z-index: 200 !important; 471             z-index: 200 !important;
472             margin: 0 !important; 472             margin: 0 !important;
473             padding: 0; 473             padding: 0;
474             margin: 0 !important; 474             margin: 0 !important;
475             width: 100% !important; 475             width: 100% !important;
476             box-shadow: 0 1px 2px rgba(0,0,0,0.1); 476             box-shadow: 0 1px 2px rgba(0,0,0,0.1);
477             -webkit-backface-visibility: hidden; 477             -webkit-backface-visibility: hidden;
478             backface-visibility: hidden; 478             backface-visibility: hidden;
479             pointer-events: all; 479             pointer-events: all;
480         } 480         }
481         .navigation { 481         .navigation {
482             padding: 0 10px; 482             padding: 0 10px;
483  483 
484             & > ul { 484             & > ul {
485                 background-color: transparent; 485                 background-color: transparent;
486             } 486             }
487             li.level0 { 487             li.level0 {
488                 & > a > span.cat-label { 488                 & > a > span.cat-label {
489                     top: -9px; 489                     top: -9px;
490                 } 490                 }
491             } 491             }
492         } 492         }
493         .minicart-wrapper { 493         .minicart-wrapper {
494             position: absolute; 494             position: absolute;
495             right: 10px; 495             right: 10px;
496             top: 50%; 496             top: 50%;
497             transform: translateY(-50%); 497             transform: translateY(-50%);
498         } 498         }
499  499 
500     } 500     }
501     .page-header { 501     .page-header {
502         margin-bottom: 0; 502         margin-bottom: 0;
503         .header.panel:extend(.abs-add-clearfix-desktop all) { 503         .header.panel:extend(.abs-add-clearfix-desktop all) {
504             padding:0; 504             padding:0;
505         } 505         }
506         .switcher { 506         .switcher {
507             float: left; 507             float: left;
508             margin-right: 15px; 508             margin-right: 15px;
509             .lib-vendor-prefix-order(1); 509             .lib-vendor-prefix-order(1);
510         } 510         }
511         .navigation { 511         .navigation {
512             .level0 { 512             .level0 {
513                 & > .level-top { 513                 & > .level-top {
514                     text-transform: uppercase; 514                     text-transform: uppercase;
515                     display: inline-block; 515                     display: inline-block;
516                 } 516                 }
517                 &.parent > a:after { 517                 &.parent > a:after {
518                     content: @icon-down-open; 518                     content: @icon-down-open;
519                     display: inline-block; 519                     display: inline-block;
520                     font-family: @icons__font-name; 520                     font-family: @icons__font-name;
521                     vertical-align: top; 521                     vertical-align: top;
522                     margin-left: 5px; 522                     margin-left: 5px;
523                     line-height: 42px; 523                     line-height: 42px;
524                 } 524                 }
525                 .submenu { 525                 .submenu {
526                     padding: 10px; 526                     padding: 10px;
527                     box-shadow: 0 10px 25px rgba(0,0,0,.15); 527                     box-shadow: 0 10px 25px rgba(0,0,0,.15);
528                     li { 528                     li {
529                         margin-bottom: 0; 529                         margin-bottom: 0;
530                         position: relative; 530                         position: relative;
531                     } 531                     }
532                     .submenu { 532                     .submenu {
533                         border-top-width: 0; 533                         border-top-width: 0;
534                         margin-top: -6px !important; 534                         margin-top: -6px !important;
535                         margin-left: 8px !important; 535                         margin-left: 8px !important;
536                     } 536                     }
537                     li.parent > a:after { 537                     li.parent > a:after {
538                         content: @icon-right-open; 538                         content: @icon-right-open;
539                         display: inline-block; 539                         display: inline-block;
540                         font-family: @icons__font-name; 540                         font-family: @icons__font-name;
541                         vertical-align: top; 541                         vertical-align: top;
542                         margin-left: 6px; 542                         margin-left: 6px;
543                         margin-right: 0; 543                         margin-right: 0;
544                         line-height: 15px; 544                         line-height: 15px;
545                         float: right; 545                         float: right;
546                     } 546                     }
547                     .active > a { 547                     .active > a {
548                         border: 0; 548                         border: 0;
549                     } 549                     }
550                 } 550                 }
551             } 551             }
552         } 552         }
553         .drop-menu { 553         .drop-menu {
554             position: relative; 554             position: relative;
555             .nav-sections { 555             .nav-sections {
556                 position: absolute; 556                 position: absolute;
557                 top: 100%; 557                 top: 100%;
558                 left: 0; 558                 left: 0;
559                 width: 100%; 559                 width: 100%;
560                 background-color: #fff; 560                 background-color: #fff;
561                 border: 1px solid #e7e7e7; 561                 border: 1px solid #e7e7e7;
562                 visibility: hidden; 562                 visibility: hidden;
563                 opacity: 0; 563                 opacity: 0;
564                 &.visible { 564                 &.visible {
565                   visibility: visible; 565                   visibility: visible;
566                   opacity: 1; 566                   opacity: 1;
567                 } 567                 }
568             } 568             }
569             > a { 569             > a {
570                 display: block; 570                 display: block;
571                 font-size: 14px; 571                 font-size: 14px;
572                 letter-spacing: -.01em; 572                 letter-spacing: -.01em;
573                 font-weight: 700; 573                 font-weight: 700;
574                 background: #222529; 574                 background: #222529;
575                 color: #fff; 575                 color: #fff;
576                 line-height: 20px; 576                 line-height: 20px;
577                 padding: 15px 15px 15px 20px; 577                 padding: 15px 15px 15px 20px;
578                 &:hover { 578                 &:hover {
579                     background-color: #555; 579                     background-color: #555;
580                 } 580                 }
581             } 581             }
582         } 582         }
583     } 583     }
584     .cms-index-index .page-header { 584     .cms-index-index .page-header {
585         .drop-menu { 585         .drop-menu {
586             > a { 586             > a {
587                 pointer-events: none; 587                 pointer-events: none;
588             } 588             }
589             .nav-sections { 589             .nav-sections {
590                 visibility: visible; 590                 visibility: visible;
591                 opacity: 1; 591                 opacity: 1;
592                 padding: 0 !important; 592                 padding: 0 !important;
593             } 593             }
594         } 594         }
595         &.sticky-header { 595         &.sticky-header {
596             .drop-menu { 596             .drop-menu {
597                 > a { 597                 > a {
598                     pointer-events: all; 598                     pointer-events: all;
599                 } 599                 }
600                 .nav-sections { 600                 .nav-sections {
601                     visibility: hidden; 601                     visibility: hidden;
602                     opacity: 0; 602                     opacity: 0;
603                     &.visible { 603                     &.visible {
604                         visibility: visible; 604                         visibility: visible;
605                         opacity: 1; 605                         opacity: 1;
606                     } 606                     }
607                 } 607                 }
608             } 608             }
609         } 609         }
610     } 610     }
611     .page-main { 611     .page-main {
612         > .page-title-wrapper { 612         > .page-title-wrapper {
613             .page-title { 613             .page-title {
614                 display: inline-block; 614                 display: inline-block;
615             } 615             }
616             .page-title + .action { 616             .page-title + .action {
617                 float: right; 617                 float: right;
618                 margin-top: @indent__base; 618                 margin-top: @indent__base;
619             } 619             }
620         } 620         }
621     } 621     }
622  622 
623     .header { 623     .header {
624         &.panel { 624         &.panel {
625             > .header.links { 625             > .header.links {
626                 .lib-list-inline(); 626                 .lib-list-inline();
627                 float: right; 627                 float: right;
628                 margin-left: auto; 628                 margin-left: auto;
629                 > li { 629                 > li {
630                     margin-bottom: 0; 630                     margin-bottom: 0;
631                     &.welcome, 631                     &.welcome,
632                     > a { 632                     > a {
633                         display: inline-block; 633                         display: inline-block;
634                     } 634                     }
635                     > a, > span { 635                     > a, > span {
636                         border-left: 1px solid rgba(255,255,255,0.18); 636                         border-left: 1px solid rgba(255,255,255,0.18);
637                     } 637                     }
638                     &:first-child { 638                     &:first-child {
639                         > a, > span { 639                         > a, > span {
640                             padding-left: 0; 640                             padding-left: 0;
641                             border-left: 0; 641                             border-left: 0;
642                         } 642                         }
643                     } 643                     }
644                     &.welcome { 644                     &.welcome {
645                         a { 645                         a {
646                             .lib-css(color, @color-white); 646                             .lib-css(color, @color-white);
647                             .lib-css(padding-left, @indent__xs); 647                             .lib-css(padding-left, @indent__xs);
648                         } 648                         }
649                     } 649                     }
650                 } 650                 }
651                 > .customer-welcome + .authorization-link { 651                 > .customer-welcome + .authorization-link {
652                     display: none; 652                     display: none;
653                 } 653                 }
654             } 654             }
655         } 655         }
656     } 656     }
657  657 
658     .logo { 658     .logo {
659         img { 659         img {
660             max-height: inherit; 660             max-height: inherit;
661         } 661         }
662     } 662     }
663  663 
664     .page-wrapper { 664     .page-wrapper {
665         .lib-vendor-prefix-display(flex); 665         .lib-vendor-prefix-display(flex);
666         .lib-vendor-prefix-flex-direction(column); 666         .lib-vendor-prefix-flex-direction(column);
667         margin: 0; 667         margin: 0;
668         min-height: 100%; // Stretch content area for sticky footer 668         min-height: 100%; // Stretch content area for sticky footer
669         position: relative; 669         position: relative;
670         transition: margin .3s ease-out 0; 670         transition: margin .3s ease-out 0;
671         > .breadcrumbs, 671         > .breadcrumbs,
672         > .top-container, 672         > .top-container,
673         > .widget { 673         > .widget {
674             box-sizing: border-box; 674             box-sizing: border-box;
675             width: 100%; 675             width: 100%;
676         } 676         }
677         .ie10 &, 677         .ie10 &,
678         .ie11 & { 678         .ie11 & {
679             height: 100%; 679             height: 100%;
680         } 680         }
681     } 681     }
682 } 682 }
683  683 
684  684 
685 // 685 //
686 //  Common 686 //  Common
687 //  _____________________________________________ 687 //  _____________________________________________
688  688 
689 & when (@media-common = true) { 689 & when (@media-common = true) {
690     .no-display:extend(.abs-no-display all) { 690     .no-display:extend(.abs-no-display all) {
691     } 691     }
692  692 
693     // 693     //
694     //  Calendar 694     //  Calendar
695     //  --------------------------------------------- 695     //  ---------------------------------------------
696  696 
697     .ui-datepicker td { 697     .ui-datepicker td {
698         padding: 0; 698         padding: 0;
699     } 699     }
700  700 
701     .ui-tooltip { 701     .ui-tooltip {
702         border: @tooltip__border-width solid @tooltip__border-color; 702         border: @tooltip__border-width solid @tooltip__border-color;
703         .lib-css(background, @tooltip__background); 703         .lib-css(background, @tooltip__background);
704         padding: 10px; 704         padding: 10px;
705     } 705     }
706     [class^="porto-icon-"]:before, [class*=" porto-icon-"]:before { 706     [class^="porto-icon-"]:before, [class*=" porto-icon-"]:before {
707         font-family: @icon-font-family; 707         font-family: @icon-font-family;
708         font-style: normal; 708         font-style: normal;
709         font-weight: normal; 709         font-weight: normal;
710         speak: none; 710         speak: none;
711  711 
712         display: inline-block; 712         display: inline-block;
713         text-decoration: inherit; 713         text-decoration: inherit;
714         width: 1em; 714         width: 1em;
715         margin-right: .1em; 715         margin-right: .1em;
716         text-align: center; 716         text-align: center;
717         /* opacity: .8; */ 717         /* opacity: .8; */
718  718 
719         /* For safety - reset parent styles, that can break glyph codes*/ 719         /* For safety - reset parent styles, that can break glyph codes*/
720         font-variant: normal; 720         font-variant: normal;
721         text-transform: none; 721         text-transform: none;
722  722 
723         /* fix buttons height, for twitter bootstrap */ 723         /* fix buttons height, for twitter bootstrap */
724         line-height: 1em; 724         line-height: 1em;
725  725 
726         /* Animation center compensation - margins should be symmetric */ 726         /* Animation center compensation - margins should be symmetric */
727         /* remove if not needed */ 727         /* remove if not needed */
728         margin-left: .1em; 728         margin-left: .1em;
729  729 
730         /* you can be more comfortable with increased icons size */ 730         /* you can be more comfortable with increased icons size */
731         /* font-size: 120%; */ 731         /* font-size: 120%; */
732  732 
733         /* Font smoothing. That was taken from TWBS */ 733         /* Font smoothing. That was taken from TWBS */
734         -webkit-font-smoothing: antialiased; 734         -webkit-font-smoothing: antialiased;
735         -moz-osx-font-smoothing: grayscale; 735         -moz-osx-font-smoothing: grayscale;
736  736 
737         /* Uncomment for 3D effect */ 737         /* Uncomment for 3D effect */
738         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 738         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
739     } 739     }
740     .panel { 740     .panel {
741         -webkit-box-shadow: none; 741         -webkit-box-shadow: none;
742         box-shadow: none; 742         box-shadow: none;
743     } 743     }
744     .recent-posts { 744     .recent-posts {
745         .item { 745         .item {
746             .post-image { 746             .post-image {
747                 border-radius: 5px; 747                 border-radius: 5px;
748                 overflow: hidden; 748                 overflow: hidden;
749                 margin: 0 0 15px 0; 749                 margin: 0 0 15px 0;
750                 padding: 2px; 750                 padding: 2px;
751                 border: 1px solid #e1e1e1; 751                 border: 1px solid #e1e1e1;
752                 background-color: #fff; 752                 background-color: #fff;
753                 min-height: 120px; 753                 min-height: 120px;
754  754 
755                 img { 755                 img {
756                     border-radius: 4px; 756                     border-radius: 4px;
757                     width: 100%; 757                     width: 100%;
758                 } 758                 }
759             } 759             }
760         } 760         }
761         .post-date { 761         .post-date {
762             float: left; 762             float: left;
763             margin-right: 10px; 763             margin-right: 10px;
764             text-align: center; 764             text-align: center;
765  765 
766             .day { 766             .day {
767                 background-color: #f7f7f7; 767                 background-color: #f7f7f7;
768                 color: @theme-color; 768                 color: @theme-color;
769                 display: block; 769                 display: block;
770                 font-size: 18px; 770                 font-size: 18px;
771                 font-weight: bold; 771                 font-weight: bold;
772                 padding: 8px; 772                 padding: 8px;
773             } 773             }
774             .month { 774             .month {
775                 background-color: @theme-color; 775                 background-color: @theme-color;
776                 border-radius: 0 0 2px 2px; 776                 border-radius: 0 0 2px 2px;
777                 box-shadow: 0 -1px 0 0 rgba(0,0,0,.07) inset; 777                 box-shadow: 0 -1px 0 0 rgba(0,0,0,.07) inset;
778                 color: #fff; 778                 color: #fff;
779                 font-size: 0.9em; 779                 font-size: 0.9em;
780                 padding: 2px 0; 780                 padding: 2px 0;
781                 display: block; 781                 display: block;
782                 width: 45px; 782                 width: 45px;
783             } 783             }
784         } 784         }
785         .postTitle { 785         .postTitle {
786             min-height: 55px; 786             min-height: 55px;
787             border: 0; 787             border: 0;
788  788 
789             h2 { 789             h2 {
790                 font-size: 20px; 790                 font-size: 20px;
791                 line-height: 27px; 791                 line-height: 27px;
792                 font-weight: normal; 792                 font-weight: normal;
793                 padding: 0; 793                 padding: 0;
794                 margin: 0 0 10px 0; 794                 margin: 0 0 10px 0;
795             } 795             }
796             a:hover { 796             a:hover {
797                 text-decoration: none; 797                 text-decoration: none;
798             } 798             }
799         } 799         }
800         .postContent { 800         .postContent {
801             font-size: 14px; 801             font-size: 14px;
802             line-height: 1.5; 802             line-height: 1.5;
803             padding-bottom: 0; 803             padding-bottom: 0;
804             overflow: hidden; 804             overflow: hidden;
805             text-overflow: ellipsis; 805             text-overflow: ellipsis;
806             display: -webkit-box; 806             display: -webkit-box;
807             -webkit-line-clamp: 3; 807             -webkit-line-clamp: 3;
808             -webkit-box-orient: vertical; 808             -webkit-box-orient: vertical;
809             margin-bottom: 15px; 809             margin-bottom: 15px;
810  810 
811             & > p { 811             & > p {
812                 margin: 0; 812                 margin: 0;
813             } 813             }
814         } 814         }
815         a.readmore { 815         a.readmore {
816             font-weight: 300; 816             font-weight: 300;
817             font-size: 16px; 817             font-size: 16px;
818         } 818         }
819     } 819     }
820 } 820 }